<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog :before-close="cancel" :close-on-click-modal="false" :title="getFormTitle()" :visible.sync="dialog"
               append-to-body width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" style="width: 370px;"/>
        </el-form-item>
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="form.name" style="width: 370px;"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.remark" style="width: 370px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
      </div>
    </el-dialog>
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col :lg="10" :md="10" :sm="24" :xl="10" :xs="24" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典列表</span>
            <!-- 新增 -->
            <el-button
                v-permission="['admin','dict:add']"
                class="filter-item"
                icon="el-icon-plus"
                size="mini"
                style="float: right;padding: 4px 10px"
                type="primary"
                @click="showAddFormDialog"
            >新增
            </el-button>
          </div>
          <!--工具栏-->
          <div class="head-container">
            <!-- 搜索 -->
            <el-input v-model="query.keyword" class="filter-item" clearable placeholder="输入名称或者描述搜索" size="small"
                      style="width: 200px;" @keyup.enter.native="toQuery"/>
            <el-button class="filter-item" size="mini" type="success" @click="toQuery">搜索
            </el-button>
            <!-- 导出 -->
            <el-button
                :loading="downloadLoading"
                class="filter-item"
                size="mini"
                type="warning"
                @click="downloadMethod"
            >导出
            </el-button>
          </div>
          <!--表格渲染-->
          <el-table border v-loading="loading" :data="data" highlight-current-row style="width: 100%;"
                    @current-change="handleCurrentChange">
<!--            <el-table-column type="selection" width="60"/>-->
            <el-table-column :show-overflow-tooltip="true" label="编码" prop="code"/>
            <el-table-column :show-overflow-tooltip="true" label="名称" prop="name"/>
            <el-table-column :show-overflow-tooltip="true" label="描述" prop="remark"/>
<!--            <el-table-column :show-overflow-tooltip="true" label="状态" prop="status" width="75px">-->
<!--              <template slot-scope="scope">-->
<!--                <el-tag v-if="scope.row.status == 0" type="danger">禁用</el-tag>-->
<!--                <el-tag v-else type="success">启用</el-tag>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" align="center" fixed="right"
                             label="操作" width="130px">
              <template slot-scope="scope">
                <el-button v-permission="['admin','dict:edit']" icon="el-icon-edit" size="mini" type="primary"
                           @click="showEditFormDialog(scope.row)"/>
                <el-popover
                    :ref="scope.row.id"
                    v-permission="['admin','dict:del']"
                    placement="top"
                    width="180"
                >
                  <p>此操作将删除字典与对应的字典详情，确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                    <el-button :loading="delLoading" size="mini" type="primary" @click="delMethod(scope.row.id)">确定
                    </el-button>
                  </div>
                  <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger"/>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <el-pagination
              :current-page="page"
              :total="total"
              layout="total, prev, pager, next, sizes"
              style="margin-top: 8px;"
              @size-change="sizeChange"
              @current-change="pageChange"
          />
        </el-card>
      </el-col>
      <!-- 字典详情列表 -->
      <el-col :lg="14" :md="14" :sm="24" :xl="14" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
            <el-button
                v-if="checkPermission(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.dictName"
                class="filter-item"
                icon="el-icon-plus"
                size="mini"
                style="float: right;padding: 4px 10px"
                type="primary"
                @click="$refs.dictDetail.showAddFormDialog"
            >新增
            </el-button>
          </div>
          <dictDetail ref="dictDetail"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import dictDetail from './dictDetail'
import crudDict from '@/api/system/dict'

export default {
  name: 'Dict',
  components: {dictDetail},
  mixins: [crud],
  data() {
    return {
      page: 1,
      title: '字典',
      crudMethod: {...crudDict},
      queryTypeOptions: [
        {key: 'name', display_name: '字典名称'},
        {key: 'remark', display_name: '描述'}
      ],
      form: {id: null, name: null, remark: null},
      rules: {
        code: [
          {required: true, message: '请输入编码', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
    console.log('data',this.data)
  },
  methods: {
    // 获取数据前设置好接口地址
    beforeInit() {
      this.url = 'api/dict'
      if (this.$refs.dictDetail) {
        this.$refs.dictDetail.data = []
        this.$refs.dictDetail.dictName = ''
      }
      return true
    },
    // 选中字典后，设置字典详情数据
    handleCurrentChange(val) {
      if (val) {
        this.$refs.dictDetail.dictName = val.name
        this.$refs.dictDetail.form.dictId = val.id
        this.$refs.dictDetail.form.dictName = val.name
        this.$refs.dictDetail.form.dictCode = val.code
        this.$refs.dictDetail.init()
      }
    }
  }
}
</script>

<style scoped>
</style>
